<template>
  <div>
    <div class="header-wrap" :style="{ paddingTop: headPadding, backgroundColor: backgroundColor }">
      <header class="header">
        <atom-icon @click="goBack" :style="{ color: cusTomColor }" class="header-back" name="menu-arrow-left" />
        <!-- 因为该框架无法支持meta属性 -->
        <div class="header-title" :style="{ color: cusTomColor }">{{ titleOptions[$route.name] || '' }}</div>
        <div class="header-back"></div>
      </header>
    </div>
    <div class="placeholder" :style="{ height: placeholderHeight }"></div>
  </div>
</template>

<script>
import { getHeaderHeightPx } from '@/scripts/tools.js';
import '@atom/atom-icons/icons/menu-arrow-left';
const HEAD_HIGH = 44;
export default {
  data() {
    return {
      // 首页title是否显示
      homeShowTitle: false,
      headPadding: `${getHeaderHeightPx() - HEAD_HIGH}px`,
      titleOptions: {
        Home: '涨停助手',
        LimitDetails: '涨停详情',
        Search: '涨停助手',
      },
      placeholderHeight: 0,
    };
  },
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 是否是在顶部
    isHomeTop: {
      type: Boolean,
      default: true,
    },
    // 是否是首页
    isHome: {
      type: Boolean,
      default: false,
    },
    // 顶部导航栏颜色
    backgroundColor: {
      type: String,
      default: '#ffffff',
    },
    // 字体和图标颜色
    cusTomColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.85)',
    },
  },
  methods: {
    // 返回事件
    goBack() {
      if (this.$route.name === 'Home') {
        window.callNativeHandler('goback', {
          type: window.getPlatform() === 'iphone' ? 'webview' : 'webpage',
        });
      } else {
        this.$router.back();
      }
    },
  },
  mounted() {
    this.placeholderHeight = `calc(0.88rem + ${this.headPadding})`;
    this.$emit('updatePlaceholderHeight', this.placeholderHeight);
  },
  // 销毁监听
  destroyed() {
    // 销毁监听
    window.removeEventListener('scroll', this.homeTitleShowHandler);
  },
};
</script>
<style lang="less" scoped>
.header-wrap {
  position: fixed;
  width: 100%;
  // 防止hxmui暂无数据覆盖头部
  padding-top: 44px;
  z-index: 10000;
  top: 0;
  left: 0;

  .header {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    font-size: 38px;
    height: 88px;
    padding: 20px 24px;
    box-sizing: border-box;
    color: #323232;

    &-back {
      font-size: 48px;
      width: 48px;
      height: 48px;
      box-sizing: border-box;
      padding: 7px;
    }

    &-home {
      width: 48px;
      height: 48px;
      color: #323232;
      box-sizing: border-box;
      border: 1px solid #979797;
      border-radius: 32px;
      margin-left: 86px;
    }

    &-title {
      font-family: PingFangSC-Medium;
      font-size: 34px;
      letter-spacing: 0;
      text-align: center;
      line-height: 44px;
      font-weight: 500;
      white-space: nowrap;
    }
  }
}
</style>
